<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>博客管理</title>
</head>

<body>
<div class="admin-content-container padded-nomal ">

    <!--        <div class="ui container">-->


    <div class="ui segment form">
        <input type="hidden" name="pageNum">
        <div class="inline fields">
            <div class="field">
                <input type="text" name="title" placeholder="标题">
            </div>

            <div class="field">
                <div class="ui selection dropdown">
                    <input type="hidden" name="typeId">
                    <i class="dropdown icon"></i>
                    <div class="default text">类型</div>
                    <div class="menu">
                        <div th:each="type : ${types}" th:text="${type.name}" class="item"
                             th:data-value="${type.id}">Java
                        </div>

                    </div>
                </div>
            </div>

            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" name="recommend" id="recommend">
                    <label for="recommend">推荐</label>
                </div>
            </div>

            <div class="field">
                <button type="button" id="search-btn" class="ui  black button"><i
                        class="search icon"></i>搜索
                </button>
            </div>

        </div>


        <div id="table-container">
            <table th:fragment="blogList" class="ui table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>分类</th>
                    <th>状态</th>
                    <th>推荐</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="blog,iterStat : ${blogs.list}">
                    <td th:text="${iterStat.count}">1</td>
                    <td th:text="${blog.title}">菜菜的kuls</td>
                    <td th:text="${blog.flag}"></td>
                    <td th:text="${blog.type.name}">个人成长</td>
                    <td th:text="${blog.published}==true? 已发布 : 未发布"></td>
                    <td th:text="${blog.recommend}==true ? 是 : 否">是</td>
                    <td th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2020-04-25</td>
                    <td>
                        <a th:href="@{/admin/blogs/{id}/update(id=${blog.id})}"
                           class="ui mini blue button">编辑</a>
                        <a th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}"
                           class="ui mini red button">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="8">
                        <div class="ui mini right floated pagination menu"
                             th:unless="${blogs.pages}==1">
                            <a onclick="page(this)" th:attr="data-page=${blogs.pageNum}-1"
                               th:unless="${blogs.isFirstPage}" class="icon item">
                                <i class="left chevron icon"></i>
                            </a>
                            <a onclick="page(this)" th:each="p : ${blogs.navigatepageNums}"
                               th:attr="data-page=${p}"
                               th:text="${p}" class="item"
                               th:classappend="${blogs.pageNum}==${p}? 'active'">1</a>

                            <a onclick="page(this)" th:attr="data-page=${blogs.pageNum}+1"
                               th:unless="${blogs.isLastPage}" class="icon item">
                                <i class="right chevron icon"></i>
                            </a>
                        </div>


                    </th>
                </tr>
                </tfoot>
            </table>

        </div>


        <div class="ui success message" th:unless="${#strings.isEmpty(msg)}">
            <i class="close icon"></i>
            <div class="header">提示：</div>
            <p th:text="${msg}">操作成功！</p>
        </div>
        <div class="ui error message" th:unless="${#strings.isEmpty(errormsg)}">
            <i class="close icon"></i>
            <div class="header">提示：</div>
            <p th:text="${errormsg}">操作失败！</p>
        </div>


    </div>


</div>
<!--    </div>-->
</body>


<!-- 页面jQuery.js的引用位置问题,如果导入了其它与jquery有关的js文件,那么jquery.js须在其它js的前面 -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/semantic.min.js}"></script>
<script th:src="@{/js/main.js}"></script>

<script>


    $("#menu-btn").click(function () {
        $(".menu-item").toggleClass("mobile-hide")
    });

    //下拉菜单
    $('#dropdownmenu').dropdown({
        on: 'hover'
    });

    //类型选择    
    $('.ui.selection.dropdown')
        .dropdown({
            maxSelections: 3
        })
    ;

    //消息关闭
    $('.message .close')
        .on('click', function () {
            $(this).closest('.message').transition('fade');
        });


    function page(obj) {
        $("[name='pageNum']").val($(obj).data("page"));
        loaddata();
    }


    $('#search-btn').click(function () {
        loaddata();
    });

    function loaddata() {
        $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            pageNum: $("[name='pageNum']").val()
        });
    }


    // showing multiple
    $('.visible.example .ui.sidebar')
        .sidebar({
            context: '.visible.example .bottom.segment'
        })
        .sidebar('hide')
    ;

</script>
</body>
</html>